import React, { useState, useEffect } from "react";
import { Card, Row, Col, Statistic, Spin, message, Tooltip } from "antd";
import {
  ClockCircleOutlined,
  AlignLeftOutlined,
  CloseCircleOutlined,
  DollarOutlined,
  EyeOutlined,
} from "@ant-design/icons";
import { useDashboardStore } from "@/popup/stores/dashboard";
import { throttle } from "lodash";
import { FlipService } from "@/popup/services/flip";
import { useUserStore } from "@/popup/stores/user";
import { useNavigate } from "react-router-dom";

const Dashboard: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const { token, logout, userInfo } = useUserStore();
  console.log("userInfo", userInfo);
  const {
    dashBoardInfo,
    saveInfo,
    init,
    loading: storeLoading,
  } = useDashboardStore();
  const handleClickAnalysis = () => {
    navigate("/analysis");
  };
  // 组件挂载时初始化数据
  useEffect(() => {
    init();
  }, [init]);

  const handleClick = throttle(async () => {
    setLoading(true);
    message.info("拉取信息中... 耗时可能较长");

    const {
      dashboardInfo: _dashboardInfo,
      shouldLogout,
    } = await FlipService.getAllFlips(token, userInfo?.userInfo?.userId);
    if (shouldLogout) {
      logout();
      return;
    }

    // 保存到 store 和 storage
    if (_dashboardInfo) {
      await saveInfo(_dashboardInfo);
      message.success("数据已保存");
    }

    setLoading(false);
  }, 1000);

  return (
    <Spin spinning={loading || storeLoading}>
      <div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <h1>仪表盘</h1>
          <Tooltip title="拉取信息会从后台同步翻牌数据到本地缓存。账号下翻牌总数越多则耗时越长，点击后请耐心等待">
            <div
              style={{
                cursor: "pointer",
                color: "#1890ff",
              }}
              onClick={handleClick}
            >
              拉取信息
            </div>
          </Tooltip>
        </div>
        <Row gutter={16}>
          <Col span={8}>
            <Card>
              <Statistic
                title="总翻牌数"
                value={dashBoardInfo?.totalFlipCount || "-"}
                prefix={<AlignLeftOutlined />}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="进行中"
                value={dashBoardInfo?.runningCount || "-"}
                prefix={<ClockCircleOutlined />}
                valueStyle={{ color: "#3f8600" }}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="已退回"
                value={dashBoardInfo?.returnedCount || "-"}
                prefix={<CloseCircleOutlined />}
                valueStyle={{ color: "#cf1322" }}
              />
            </Card>
          </Col>
          <Col style={{ marginTop: "8px" }} span={8}>
            <Card>
              <Statistic
                title="翻牌鸡腿"
                value={dashBoardInfo?.costTotal || "-"}
                prefix={<DollarOutlined />}
                valueStyle={{ color: "#faad14" }}
              />
            </Card>
          </Col>
          <Col style={{ marginTop: "8px" }} span={8}>
            <Card onClick={handleClickAnalysis}>
              <Statistic
                style={{
                  cursor: "pointer",
                }}
                title="查看统计"
                value={">"}
                prefix={<EyeOutlined />}
                valueStyle={{ color: "#1890ff" }}
              />
            </Card>
          </Col>
        </Row>
      </div>
    </Spin>
  );
};

export default Dashboard;
